<template>
  <el-descriptions :column="1" id="popup-top" class="ol-popup-top" border>
    <template #title>
      <span class="popup-title">事件详细信息</span>
    </template>
    <template #extra>
      <span @click="closeAddPopup" class="extra">✖</span>
    </template>
    <el-descriptions-item
      label="事件编号"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-input
        v-model="inputId"
        style="width: 200px"
        placeholder="如:SJ201812090001"
      />
    </el-descriptions-item>
    <el-descriptions-item
      label="事件类型"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-select v-model="typeVal" placeholder="请选择" style="width: 200px">
        <el-option
          v-for="item in eventTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-descriptions-item>
    <el-descriptions-item
      label="事件等级"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-select v-model="levelVal" placeholder="请选择" style="width: 200px">
        <el-option
          v-for="item in leveltTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-descriptions-item>
    <el-descriptions-item
      label="发生时间"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-date-picker
        v-model="timeVal"
        type="datetime"
        placeholder="请选择时间"
        style="width: 200px"
        value-format="YYYY.MM.DD HH:mm:ss"
      />
    </el-descriptions-item>
    <el-descriptions-item
      label="发生地点"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-input
        v-model="inputAddress"
        style="width: 200px"
        placeholder="如:光谷广场"
      />
    </el-descriptions-item>
    <el-descriptions-item
      label="车牌号"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-input
        v-model="inputPlate"
        style="width: 200px"
        placeholder="如:鄂A00000"
      />
    </el-descriptions-item>
    <el-descriptions-item
      label="驾驶员"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-input
        v-model="inputDriver"
        style="width: 200px"
        placeholder="如:张xx"
      />
    </el-descriptions-item>
    <el-descriptions-item
      label="处理状态"
      label-align="center"
      width="80px"
      label-class-name="my-label"
      class-name="my-content"
    >
      <el-select v-model="stateVal" placeholder="请选择" style="width: 200px">
        <el-option
          v-for="item in stateTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-descriptions-item>
  </el-descriptions>
  <div id="popup-bottom" class="ol-popup-bottom">
    <el-button type="default" size="small" @click="submitEvent">提交</el-button>
    <el-button type="default" size="small" @click="closeAddPopup"
      >取消</el-button
    >
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { closeAddPopup, setPopup } from '@/ol-api/popup'
import { useTrafficStore } from '@/stores/counter'
import { Point } from '@/mapgis-api/Point'
const trafficStore = useTrafficStore()
const { toggleAddPopupVisible } = useTrafficStore()
let $docLayer = null
let $map = null
let { proxy } = getCurrentInstance()
onMounted(() => {
  $docLayer = proxy.$docLayer
  $map = proxy.$map
})
// input的v-model绑定变量
const inputId = ref('')
const inputAddress = ref('')
const inputPlate = ref('')
const inputDriver = ref('')
// select的v-model绑定变量
const typeVal = ref('')
const levelVal = ref('')
const stateVal = ref('')
// date-picker的v-model绑定变量
const timeVal = ref('')
//事件类型选项
const eventTypes = [
  { label: '翻车', value: '翻车' },
  { label: '刮擦', value: '刮擦' },
  { label: '碾压', value: '碾压' },
  { label: '碰撞', value: '碰撞' },
  { label: '其他', value: '其他' },
  { label: '失火', value: '失火' },
]
//事件等级选项
const leveltTypes = [
  { label: '一般事故', value: 1 },
  { label: '较大事故', value: 2 },
  { label: '重大事故', value: 3 },
  { label: '严重事故', value: 4 },
]
//处理状态选项
const stateTypes = [
  { label: '未处理', value: 0 },
  { label: '处理中', value: 1 },
  { label: '已归档', value: 2 },
]
//添加事件点
const addPoints = ({
  inputId,
  typeVal,
  levelVal,
  timeVal,
  inputAddress,
  inputPlate,
  inputDriver,
  stateVal,
}) => {
  //设置属性
  const atrributes = [
    { name: '事件编号', type: 'string', value: inputId },
    { name: '事件类型', type: 'string', value: typeVal },
    { name: '事件等级', type: 'short', value: levelVal },
    { name: '发生时间', type: 'string', value: timeVal },
    { name: '发生地点', type: 'string', value: inputAddress },
    { name: '车牌号', type: 'string', value: inputPlate },
    { name: '驾驶员', type: 'string', value: inputDriver },
    { name: '处理状态', type: 'short', value: stateVal },
  ]
  Point.add({
    position: trafficStore.eventPosition,
    attr: atrributes,
    service,
    docLayer: $docLayer,
  })
}
//设置service
let service = { name: 'xm', layerId: 2 }
const submitEvent = () => {
  if (
    inputId.value == '' ||
    typeVal.value == '' ||
    levelVal.value == '' ||
    timeVal.value == '' ||
    inputAddress.value == '' ||
    inputPlate.value == '' ||
    inputDriver.value == '' ||
    stateVal.value.length
  ) {
    ElMessage({
      message: '事件添加不能有空值!',
      type: 'warning',
    })
    return
  } else {
    addPoints({
      inputId: inputId.value,
      typeVal: typeVal.value,
      levelVal: levelVal.value,
      timeVal: timeVal.value,
      inputAddress: inputAddress.value,
      inputPlate: inputPlate.value,
      inputDriver: inputDriver.value,
      stateVal: stateVal.value,
    })
    inputId.value = ''
    typeVal.value = ''
    levelVal.value = ''
    timeVal.value = ''
    inputAddress.value = ''
    inputPlate.value = ''
    inputDriver.value = ''
    stateVal.value = ''
    setPopup(null, $map)
  }
  // 清除地图中画笔的source
  trafficStore.addPopupSource.clear()
  //关闭弹窗的同时关闭pinia中的弹窗状态
  toggleAddPopupVisible()
}
</script>
<style scoped>
.ol-popup-top {
  background-color: #70caf5;
  color: white;
  font-size: 10px;
  padding: 5px;
  border-bottom: 1px solid pink;
}

.ol-popup-content {
  padding: 8px;
  font-size: 5px;
  display: flex;
  align-items: center;
}

/* 自定义弹框样式 */
.popup-title {
  font-size: 14px;
  font-weight: bold;
  color: aliceblue;
}

:deep(.my-label) {
  display: flex;
  justify-content: center;
  font-size: 12px !important;
  font-family: '微软雅黑' !important;
  color: rgba(0, 0, 0, 0.9) !important;
}

:deep(.my-content) {
  font-size: 10px !important;
  padding: 0px 2px !important;
}

.ol-popup-bottom {
  padding: 5px;
  display: flex;
  justify-content: center;
}

.ol-popup-bottom button {
  padding: 10px;
}

.extra:hover {
  cursor: pointer;
}
</style>
